<template>
  <view style="background-color: #fefefe;">
    <view>
      <view class="page_top2" :style="{
        background: topNav ? 'white' : 'transparent',
        'z-index': 199,
      }">
        <top-status></top-status>
        <view class="tabsBack">
          <view @click="goBack()" class="blackbox">
            <!-- <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17152491719361330.png"
							mode="widthFix"></image> -->
            <uni-icons :color="topNav ? 'black' : '#495052'" type="left" size="30"></uni-icons>
          </view>
          <view class="topTitle hiddenText" v-show="topNav">{{
            $util.entitiesToUtf16(resData.TrueName)
          }}</view>
        </view>
      </view>

      <view class="page_top">
        <!-- @click="IsOpenBg = !IsOpenBg" -->
        <!-- <top-status></top-status> -->
        <view class="tabs">
          <!-- <swiper class="swiper" :autoplay="true" circular>
              <swiper-item v-for="item in restoreImg(resData.Resume)" :key="item.ID">
                <view class="bannerImageBox">
                  <image class="adverimg" :src="item" mode="widthFix"></image>
                </view>
              </swiper-item>
            </swiper> -->
          <block v-if="resData.ServerList.length > 0">


            <block v-if="restoreImg(resData.ServerList[0].ImgList).length > 0">
              <block v-for="(item, index) in restoreImg(resData.ServerList[0].ImgList)" :key="index">
                <image v-if="index == 0" :src="item" mode="aspectFill"
                  @click.stop="lookimg(restoreImg(resData.ServerList[0].ImgList), index, resData.UserID)"></image>
              </block>
            </block>
            <image v-else src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/17207684593791221.png"
              mode="widthFix">
            </image>
          </block>
          <!-- <view v-if="userid == te_userid" class="changeImg" @click.stop="changeImg">
            <uni-icons type="image" size="28"></uni-icons>
            <text>换封面</text>
          </view> -->
        </view>
      </view>
    </view>
    <view class="load" v-if="!load">
      <u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
    </view>
    <view v-else class="user_visitior" :class="{ openBg: IsOpenBg }">
      <view class="userBox">
        <view class="userinfo">
          <image class="hdimg" :src="resData.PhotoUrl" mode="aspectFill"
            @click="nav_to('/pages/user/user_visitor?id=' + resData.UserID)"></image>
          <view class="rightbox">
            <view class="namebox">
              <view class="name">{{ $util.entitiesToUtf16(resData.TrueName) }}</view>
              <view class="level"
                :class="{ 'level': resData.Level == '初级' || resData.Level == '中级' || resData.Level == '高级' || resData.Level == '助教', 'level2': resData.Level == '跟拍', 'level3': resData.Level == '网红' }">
                {{ resData.Level }}</view>
              <view class="name_edit" @click="openCoach" v-if="userid == te_userid">编辑资料</view>
              <!-- <view class="Followbtn" v-else>
                <image src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/17212875566721061.png" class="follimg"></image>
                <view class="folltext">关注</view>
              </view> -->
            </view>
            <view class="r_name_2">
              <view class="ratingbox">
                <view class="rattext">评分：</view>
                <block v-for="(value, index) in starRateView(resData.Score)" :key="index">
                  <image class="ratimg" :src="value"></image>
                </block>
              </view>
              <view class="addrebox">
                <image class="addreimg"
                  src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17152361921951044.png">
                </image>
                <view class="placed">{{ resData.City || '未知' }}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="messagebox">
          <view class="label" v-if="resData.Sex">{{ resData.Sex }}</view>
          <view class="label" v-if="resData.Birthday">{{ $util.GetAge('', resData.Birthday) + '岁' }}</view>
          <view class="label" v-if="resData.City">{{ resData.City }}</view>
          <view class="label" v-if="resData.Height">{{ resData.Height + 'cm' }}</view>
          <view class="label" v-if="resData.Weight">{{ resData.Weight + 'kg' }}</view>
          <view class="label" v-if="resData.Birthday">{{ resData.Birthday ?
            ($util.constellate(resData.Birthday) ? $util.constellate(resData.Birthday).Name : '未知') : '' }}
          </view>
          <view class="label" v-if="resData.WorkType">{{ resData.WorkType }}</view>
          <!-- <view class="me_title">擅长：</view> -->
          <view class="label" v-for="(item, index) in Skillslist" :key="index">{{ item }}</view>
        </view>
        <!-- <view class="messagebox">
          <view class="me_title">常驻：</view>
          <view class="me_text">{{ (resData.ShopName ? resData.ShopName : '未知') + ' | ' + resData.Distance + 'km' }}
          </view>
        </view> -->
        <view class="messagebox">
          <view class="me_title">服务：</view>
          <view class="me_text">{{ resData.serve || 0 }}单</view>
          <view class="ClickNum">
            <uni-icons type="eye" size="20"></uni-icons>
            <view class="sum">{{ resData.ViewNum || 0 }}</view>
          </view>
        </view>
        <view class="messagebox" v-if="IsManager">
          <view class="me_title">电话：</view>
          <view class="me_text">{{ resData.Phone || '' }}</view>
          <image style="margin-left: 20rpx;" class="rimg"
            src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1716976610435205.png" mode="widthFix"
            @click="callNumber">
          </image>
        </view>
        <!-- <view class="bottomline"></view> -->
        <!-- <view class="Introduce">{{ resData.Resume || '' }}</view> -->
      </view>


      <!-- 技能tab头 -->
      <view class="navbox">
        <view class="navtitle" v-for="(item, index) in navlist" :key="index" :class="{ 'text4': navindex == index }"
          @click="navswitch(index)">
          {{ item }}
          <view v-if="navindex == index" class="aft4"></view>
        </view>
      </view>
      <block v-if="navindex == 0">
        <view class="resimgbox">
          <view class="retextbox">
            <view class="retext">教练展示</view>
            <!-- <view class="re_edit" @click="openCoachImg" v-if="userid == te_userid">编辑照片</view> -->
          </view>
          <view class="imgBoxContent">
            <block v-if="resData.ServerList.length > 0 && resData.ServerList[0].Video">

              <view class="servideo_box" @click.stop="">
                <!-- #ifdef MP-WEIXIN -->
                <video :direction="0" :src="resData.ServerList[0].Video"
                  :poster="resData.ServerList[0].Video + '?x-oss-process=video/snapshot,t_1,m_fast,ar_auto'"></video>
                  <!-- #endif -->
                <!-- #ifdef APP-PLUS -->
                <view class="v_imgbox" @click="gotovideo(item)">
                        <image class="videoimg" style="max-width:100%;" :src="resData.ServerList[0].Video+ '?x-oss-process=video/snapshot,t_0,f_jpg'" mode="aspectFill">
                      </image>
                      <image class="playimg" src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/17259497034651108.png"></image>
                </view>
                <!-- #endif -->
              </view>
            </block>

            <block v-if="resData.ServerList.length > 0 && restoreImg(resData.ServerList[0].ImgList).length > 0">
              <view class="teintimgbox">
                <image class="teintimg" v-for="(item, index) in restoreImg(resData.ServerList[0].ImgList)" :key="index"
                  :src="item" mode="aspectFill"
                  @click="lookimg(restoreImg(resData.ServerList[0].ImgList), index, resData.UserID)"></image>
              </view>
            </block>
            <view style="width: 100%;" v-if="resData.ServerList.length == 0">
              <image class="kongimg" src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720073678914285.png"
                mode="widthFix"></image>
              <view class="kongtext">暂无形象照片~</view>
            </view>
          </view>
        </view>
        <!-- <view class="Skillsbox">
        <view class="Skillstextbox">
          <view class="Skillstext">擅长技能</view>
          <view class="re_edit" @click="openSkill" v-if="userid == te_userid">编辑技能</view>
        </view>
        <view class="skillcontentbox">
          <view class="skillcont" v-for="(item, index) in Skillslist" :key="index">
            {{ item }}
          </view>
        </view>
        <view v-if="Skillslist.length == 0">
          <image class="kongimg" src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720073678914285.png"
            mode="widthFix"></image>
          <view class="kongtext">暂无擅长技能~</view>
        </view>
      </view> -->


        <!-- 常驻场地 -->
        <!-- <view class="Merchant">
        <view class="mertext">
          常驻场地
        </view>
        <view class="mercenbox">
          <image class="shopimg"></image>
          <view class="ringhtbox">
            <view class="shopnamebox">
              <view class="shopname">羽毛球馆</view>
              <image class="authenimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17174039204751074.png"></image>
            </view>
            <view class="labelbox">
              <view class="label" v-for="(item,index) in lableList" :key="index">{{item}}</view>
            </view>
            <view class="time">{{'营业时间：06:00～23:00'}}</view>
            <view class="addressbox">
              <view class="addtext">{{'天河区天河路299号(体育中心…'}}</view> 
              <view class="dictext">{{'1.2km'}}</view> 
              </view>
          </view>
        </view>
      </view> -->
        <view class="Serverbox">
          <view class="Servertextbox">
            <view class="Servertext">课程服务</view>
            <block v-if="userid == te_userid">
              <view v-if="!isServer" class="re_edit" @click="isServer = true">课程管理</view>
              <block v-else>
                <view class="re_edit2" @click="openServeBox">添加课程</view>
                <view class="re_close" @click="isServer = false">取消</view>
              </block>
            </block>

          </view>
          <block v-if="resData.ServerList.length > 0 && resData.ServerList[0].ServerItemList.length > 0">
            <view v-for="(item, index) in resData.ServerList[0].ServerItemList" :key="item.ID" class="contentbox"
              @click.stop="nav_to('/pages/teacher/course_details?id=' + item.ID + '&index=' + index+'&techid='+ID)">
              <view class="conCellBox">
                <image class="icon" :src="item.Images.split(',')[0]" mode="aspectFill"></image>
                <view class="titlebox">
                  <view class="title">{{ $util.entitiesToUtf16(item.ProductName) }}</view>
                  <view class="fee">{{ item.Price }}/小时</view>
                </view>
                <view v-if="!isServer" class="reservabtn" @click.stop="gote_reserva(0, index, item.ID, item.Price)">
                  立即预约
                </view>
                <view v-else class="reservabtn2" @click.stop="DeleteServer(item.ID)">删除</view>
              </view>
              <view class="tipsBox">
                <!-- <view class="tipsTitle">服务备注：</view> -->
                <!-- <view class="tipsRemark">{{ $util.entitiesToUtf16(item.Description) || '该教练未填写服务备注' }}</view> -->
              </view>

            </view>
          </block>
          <view v-else>
            <image class="kongimg" src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720073678914285.png"
              mode="widthFix"></image>
            <view class="kongtext">Ta还没有服务项目~</view>
          </view>
        </view>
        <view class="Evalbox">
          <view class="Evaltext">用户评价</view>
          <view class="reviewbox" v-for="(item, index) in relist" :key="index">
            <view class="re_user">
              <image class="re_hdimg" :src="item.HeadImgUrl" mode="aspectFill" @click="nav_to('/pages/user/user_visitor?id='+item.UserID)"></image>
              <view class="re_namebox">
                <view class="re_name">
                  <view class="name">{{ $util.entitiesToUtf16(item.Name) }}</view>
                  <view class="titme">{{ getTime2(item.EvalTime) }}</view>
                </view>
                <view class="starbox">
                  <image class="starimg" v-for="(value, index) in item.JS" :key="index"
                    src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1719814859207878.png"></image>
                </view>
                <view class="re_con">
                  {{ $util.entitiesToUtf16(item.EvalContent) }}
                </view>
                <!-- <view class="re_sebox">
                  <image class="serviceimg"
                    src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/17202319639751233.png"></image>
                  <view class="se_text">回复评价</view>
                </view> -->
              </view>
            </view>
          </view>
          <view v-if="relist.length == 0">
            <image class="kongimg" src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720073678914285.png"
              mode="widthFix"></image>
            <view class="kongtext">Ta还没有评论~</view>
          </view>
        </view>
      </block>
      <block v-if="navindex == 1">
        <view v-if="userid == te_userid" class="puadd" @click="nav_to('/pages/dynamic/dynamic_add')">
          <image class="releaseimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1716545108243136.png"
            mode="widthFix"></image>
          <view class="putitle">发布</view>
        </view>
        <view v-if="dynamicList.length > 0">
          <view class="list wap" v-for="(item, index) in dynamicList" :key="index">
            <view class="userbox">
              <image class="userimg" :src="item.HeadImgUrl" mode="aspectFill" @click="nav_to('/pages/user/user_visitor?id=' + resData.UserID)"></image>
              <view class="middbox">
                <view class="name">{{
                  $util.entitiesToUtf16(item.Name)
                }}
                  <image v-if="item.UserType != '普通用户'" mode="widthFix"
                    src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1716367597061433.png"></image>
                </view>
                <view class="daybox">
                  <text class="Birthday">{{ getYearStr(item.Birthday) == '未知' ? '00后' : getYearStr(item.Birthday) +
                    '后'
                    }}</text>
                  <!-- <text class="borderLine">|</text>
                  <text class="city" v-if="item.City">{{
                    item.City
                  }}</text> -->
                </view>
              </view>
              <view class="time">
                {{ getTime(item.CreateTime) }}
              </view>
            </view>
            <view v-if="item.Content" class="content diyC">
              {{ $util.entitiesToUtf16(item.Content).replace(/ /g, "&nbsp;") }}
            </view>
            <Layoutimg v-if="item.IsVideo === 0" :item="item" :ossWatermark="ossWatermark" style="width: 95%;"></Layoutimg>
            <view  class="video_box" v-else @click.stop="">
              <!-- #ifdef MP-WEIXIN -->
              <video :id="'video'+index"  style="position: relative;" :direction="0" :src="JSON.parse(item.Images)[0]" :poster="JSON.parse(item.Images)[0] +
              '?x-oss-process=video/snapshot,t_1,m_fast,ar_auto'
              " @play="videoPlay(index)">
              </video>
              <!-- #endif -->
              <!-- #ifdef APP-PLUS -->
                <view class="v_imgbox2" @click="gotovideo2(item)">
                  <image class="videoimg2" style="max-width:100%;" :src="JSON.parse(item.Images)[0]+ '?x-oss-process=video/snapshot,t_0,f_jpg'" mode="aspectFill">
                </image>
                <image class="playimg2" src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/17259497034651108.png"></image>
                </view>
              <!-- #endif -->
            </view>
            <view class="ft_btn">
              <view class="citybottom">
                {{ item.City }}
              </view>
              <view class="buttonbox" :class="{ boxWidth: userid == te_userid }">
                <!-- <view class="zan" v-if="userid == te_userid" @click="del(item.ID)">
                  <uni-icons type="trash" size="24" color="#9b9b9b"></uni-icons>
                </view> -->
                <view class="zan" @click="zan(item.ID)">
                  <uni-icons type="hand-up" size="24" color="#9b9b9b" v-if="item.IsMyZAN == 0"></uni-icons>
                  <uni-icons type="hand-up-filled" size="24" color="#ef4034" v-else></uni-icons>
                  <text>{{
                    item.CommunityZAN.length > 0 ? item.CommunityZAN.length : ""
                  }}</text>
                </view>
                <view class="zan" @click="tocommit(item.ID, 0)">
                  <uni-icons type="chat" size="24" color="#9b9b9b"></uni-icons>
                  <text>{{
                    item.CommunityComments.length > 0
                      ? item.CommunityComments.length
                      : ""
                  }}</text>
                </view>
                <view class="zan">
                <!-- #ifdef MP-WEIXIN -->
                <button hover-class="none" open-type="share" :data-id="item.ID">
										<uni-icons type="redo" size="24" color="#9b9b9b"></uni-icons>
									</button>
                <!-- #endif -->
                <!-- #ifdef APP-PLUS -->
                <!-- <button hover-class="none" @click="app_share(item)">
										<uni-icons type="redo" size="24" color="#9b9b9b"></uni-icons>
									</button> -->
                <!-- #endif -->
                </view>
              </view>
            </view>
            <view v-if="item.CommunityComments.length > 0" class="Commbox">
              <view class="msgbox" v-for="(value, c_index) in item.CommunityComments" :key="c_index">
                <view class="comment" @click="comment_edit(index, c_index, value.Name)" v-if="value.ReplyID > 0">
                  <text>
                    <text @click.stop="nav_to('/pages/user/user_visitor?id=' + value.UserID)">{{
                      $util.entitiesToUtf16(value.Name) }}</text>
                    <text class="reviewC">回复</text>
                    <text @click.stop="nav_to('/pages/user/user_visitor?id=' + value.Pre_UserID)"> {{
                      $util.entitiesToUtf16(value.Pre_Name) }}:</text>
                  </text>
                  <text>{{ $util.entitiesToUtf16(value.Content) }}</text>
                </view>
                <view class="comment" @click="comment_edit(index, c_index, value.Name)" v-else>
                  <text @click.stop="nav_to('/pages/user/user_visitor?id=' + value.UserID)">{{
                    $util.entitiesToUtf16(value.Name) }}:</text>
                  <text>{{ $util.entitiesToUtf16(value.Content) }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view v-else>
          <image class="kongimg" src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720073678914285.png"
            mode="widthFix"></image>
          <view class="kongtext">Ta还没有发布挥友圈哦～</view>
        </view>
      </block>
      <block v-if="navindex == 2">
        <view class="cirlistBox">
          <block v-if="teamlist.length > 0">
            <view class="cirlist" v-for="(item, index) in teamlist" :key="index"
              :style="item.Logo ? 'background-image: url(' + (item.Logo) + ');background-size: cover;background-repeat:no-repeat;' : 'background-color:#fff'"
              @click="nav_to('/pages/together/cirDetail?id=' + item.ID)">
              <view class="cirinfobox">
                <image class="hdimg" :src="item.Logo ? item.Logo : ''" mode="aspectFill"></image>
                <view class="cirinfo">
                  <view class="cirname">{{ item.TeamName ? $util.entitiesToUtf16(item.TeamName) : '' }}</view>
                  <view class="cirrem hiddenText">{{ $util.entitiesToUtf16(item.Tips) }}</view>
                </view>
                <!-- <view class="cirquit" v-if="item.IsJoin == 1" @click.stop="quitTeam(item, index)">
            <view class="jointext">退出</view>
          </view> -->
                <view v-if="item.IsJoin == 0" class="cirjoin" @click.stop="JoinTeam(item.ID, index)">
                  <image class="joinimg"
                    src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1716545108243136.png">
                  </image>
                  <view class="jointext">加入</view>
                </view>
              </view>
              <view class="activitybox">
                <block v-if="item.PartList.length > 0">
                  <view class="actcon" v-for="(value, i) in item.PartList" :key="i"
                    @click.stop="nav_to('/pages/ball/ball_details?id=' + value.ID)">
                    <image class="actimg" :src="value.Images ? value.Images.split(',')[0] : ''" mode="aspectFill">
                    </image>
                    <view class="actright">
                      <view class="actname">{{ $util.entitiesToUtf16(value.Title) }}</view>
                      <view class="actgup">
                        <image class="actgupimg"
                          src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1722252582451895.png"></image>
                        <view class="actguptext hiddenText">{{ `${getTime2(value.ServerDate)} ${getWeek(value.ServerDate)}
                          ${value.ServerTime}` }}</view>
                      </view>
                      <view class="actgup">
                        <image class="actgupimg"
                          src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17152361921951044.png"></image>
                        <view class="actguptext hiddenText">{{ value.Place }}</view>
                      </view>
                      <view class="actgup2">
                        <view class="peoplenum">{{ value.Item ? value.Item.length + '人' : '0人' }}</view>
                        <!-- <image class="peoImg" src=""></image> -->
                        <view class="imgbox" v-if="imglist1(value.Item).length > 0">
                          <image class="peoImg" v-for="(items, is) in imglist1(value.Item)" :key="is"
                            :src="items.HeadImgUrl" mode="aspectFill"></image>
                        </view>
                      </view>
                    </view>
                  </view>
                </block>
              </view>
              <view class="blackshadow2"></view>
            </view>
            <view style="height: 100rpx;"></view>
          </block>
          <block v-else>
            <view class="empty">
              <u-empty mode="list" width="100" height="100"
                icon="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720073678914285.png" :show="true"
                iconSize="32" :text="sortindex == 0 ? '您还未加入圈子' : '暂无数据'"></u-empty>
            </view>
          </block>
        </view>
      </block>
      <view class="bottmobtnbox">
      </view>
      <view class="bottmobtn" v-if="false">
        <view class="tebtn" @click="btnswitch">预约私教</view>
      </view>
      <inputBox :commit="commit2" @submit="submit" @onBlur="onBlur"></inputBox>
    </view>

    <!-- 遮罩层 -->
    <view v-if="isteinfo || isreimg || popuskill || isshow" class="blackshadow" @click="closeshadow"></view>
    <!-- 修改教练信息弹窗 -->
    <uni-popup ref="coachInfoBox" type="center">
      <view class="user_edit">
        <!-- <view class="group group_hd">
          <view class="lab">头像</view>
          <view class="inp_box">
            <button class="user_header_btn" open-type="chooseAvatar" hover-class="none" @chooseavatar="chooseavatar">
              <view class="user_headerimg">
                <view class="cover_btn">
                  <image class="image_user" @error="isHeader = false" :src="teinifo.PhotoUrl" mode="aspectFill" />
                </view>
                <uni-icons type="right" size="18" color="#c6c6c6"></uni-icons>
              </view>
            </button>
          </view>
        </view> -->
        <view class="group">
          <view class="lab">姓名</view>
          <view class="inp_box">
            <input type="nickname" maxlength="10" v-model="teinifo.TrueName" placeholder="输入昵称(最多输入10个字)" />
          </view>
        </view>
        <view class="group">
          <view class="lab">手机号</view>
          <view class="inp_box" style="margin-right: 16rpx">
            <input type="number" maxlength="11" v-model="teinifo.Phone" placeholder="请输入手机号" />
            <!-- #ifdef MP-WEIXIN -->
            <button class="s_btn" open-type="getPhoneNumber" @getphonenumber="getNums">
              绑定手机
            </button>
            <!-- #endif -->
          </view>
        </view>
        <view class="group">
          <view class="lab">性别</view>
          <view class="inp_box" @click="isSex = true">
            <input type="text" disabled :value="teinifo.Sex" placeholder="请选择" />
          </view>
          <uni-icons type="right" size="18" color="#c6c6c6"></uni-icons>
        </view>
        <view class="group">
          <view class="lab">生日</view>
          <view class="inp_box" @click="showBirthday = true">
            <input type="text" disabled :value="teinifo.Birthday" placeholder="请选择" />
          </view>
          <uni-icons type="right" size="18" color="#c6c6c6"></uni-icons>
        </view>
        <view class="group">
          <view class="lab">{{ '身高(cm)' }}</view>
          <view class="inp_box">
            <input type="text" maxlength="3" v-model="teinifo.Height" placeholder="请输入" />
          </view>
        </view>
        <view class="group">
          <view class="lab">{{ '体重(kg)' }}</view>
          <view class="inp_box">
            <input type="text" maxlength="3" v-model="teinifo.Weight" placeholder="请输入" />
          </view>
        </view>
        <view class="group">
          <view class="lab">工作类型</view>
          <view class="inp_box" @click="isConstell = true">
            <input type="text" disabled :value="teinifo.WorkType" placeholder="请选择" />
          </view>
          <uni-icons type="right" size="18" color="#c6c6c6"></uni-icons>
        </view>
        <view class="teeidebtn" @click.stop="confTeinfo">确认修改</view>
      </view>
    </uni-popup>

    <!-- 形象照修改弹窗 -->
    <uni-popup ref="coachImgBox" type="center">
      <view class="img_list">
        <view class="title">{{ "形象照片(至少传三张)" }}</view>
        <view class="img_box">
          <view class="img" v-for="(item, i) in imgArr" :key="i">
            <image :src="item.tempUrl" mode="aspectFill"></image>
            <view class="icon" @click.stop="delImg(i)">
              <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710154762492571.png" mode=""></image>
            </view>
          </view>
          <!-- #ifdef MP-WEIXIN -->
          <view class="img addimg" @tap="upload" v-if="imgArr.length < 9">
            <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17104950296621296.png" mode=""></image>
          </view>
          <!-- #endif -->
          <!-- #ifdef APP-PLUS -->
          <view class="img addimg" @tap="selectImg_APP" v-if="imgArr.length < 9">
            <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17104950296621296.png" mode=""></image>
          </view>
          <!-- #endif -->
        </view>
        <view class="teeidebtn" @click.stop="confTeres">确认修改</view>
      </view>
    </uni-popup>

    <!-- 擅长技能弹窗 -->
    <uni-popup ref="skillBox" type="center">
      <view class="sporttext">我的技能：<text class="maxtag">{{ "(最多选择三个技能)" }}</text></view>
      <view class="sportbox">
        <view @click="skitype(item.Code, item.checked)" class="sport" v-for="(item, index) in sportList" :key="index"
          :class="item.checked ? 'text4' : ''">
          {{ item.Code }}
        </view>
      </view>
      <view style="background: white;border-radius: 0 0 18rpx 18rpx;    padding-bottom: 30rpx;">
        <view class="teeidebtn2" @click="confimskill">确认修改</view>
      </view>
    </uni-popup>
    <!-- 修改服务弹窗 -->
    <uni-popup ref="serveBox" type="center">
      <view class="bottombox">
        <view class="group_2" @click.stop="showmotion = true">
          <view class="lab">{{ '运动项目' }}</view>
          <view class="inp_box">
            <input type="text" :value="fuwuData.Type" disabled placeholder="请选择" />
          </view>
          <view class="icon_box">
            <uni-icons type="right" size="20" color="#E7E7E7"></uni-icons>
          </view>
        </view>
        <view class="group_2">
          <view class="lab">{{ '项目名称' }}</view>
          <view class="inp_box">
            <input type="tel" v-model="fuwuData.ProductName" placeholder="请填写" maxlength="25" />
          </view>
        </view>
        <view class="group_2">
          <view class="lab">{{ '服务费用/小时' }}</view>
          <view class="inp_box">
            <input type="tel" v-model.number="fuwuData.Price" placeholder="请填写" maxlength="6" />
          </view>
        </view>
        <!-- <view class="group_textarea_2">
        <view class="lab">服务说明</view>
        <textarea style="width: 100%;height: 80%; font-weight: 400;margin-top: 20rpx;" :value="fuwuData.Description"
          placeholder="请填写说明" placeholder-class="remtext" @input.stop="inputrem" />
        <view class="count">{{ fuwuData.Description.length }} / {{ maxCount }}</view>
      </view> -->
        <view>
          <view class="classimg_list">
            <view class="title">{{ "课程主图" }}</view>
            <view class="img_box">
              <view class="img" v-for="(item, i) in classimg" :key="i">
                <image :src="item.tempUrl" mode="aspectFill"></image>
                <view class="icon" @click.stop="delclassimg(i)">
                  <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710154762492571.png" mode="">
                  </image>
                </view>
              </view>
              <!-- #ifdef MP-WEIXIN -->
              <view class="img addimg" @tap="classupload" v-if="classimg.length < 9">
                <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17104950296621296.png" mode=""></image>
              </view>
              <!-- #endif -->
              <!-- #ifdef APP-PLUS -->
              <view class="img addimg" @tap="selectclass_APP" v-if="classimg.length < 9">
                <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17104950296621296.png" mode=""></image>
              </view>
              <!-- #endif -->
            </view>
          </view>
          <view class="classtext">建议尺寸：414*316px，或同等比例</view>
        </view>
        <view class="classimg_list">
          <view class="title">{{ "课程详情图" }}</view>
          <view class="img_box">
            <view class="img" v-for="(item, i) in classdeimg" :key="i">
              <image :src="item.tempUrl" mode="aspectFill"></image>
              <view class="icon" @click.stop="delclassdeimg(i)">
                <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710154762492571.png" mode=""></image>
              </view>
            </view>
            <!-- #ifdef MP-WEIXIN -->
            <view class="img addimg" @tap="classdeupload" v-if="classdeimg.length < 9">
              <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17104950296621296.png" mode=""></image>
            </view>
            <!-- #endif -->
            <!-- #ifdef APP-PLUS -->
            <view class="img addimg" @tap="selectclassde_APP" v-if="classdeimg.length < 9">
              <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17104950296621296.png" mode=""></image>
            </view>
            <!-- #endif -->
          </view>
        </view>
        <view class="Eval" @click.stop="Eval">
          提交
        </view>
      </view>
    </uni-popup>



    <!-- 运动项目 -->
    <u-picker :show="showmotion" immediateChange @confirm="setmotion" @cancel="showmotion = false"
      :columns="motiontype"></u-picker>
    <!-- 性别 -->
    <u-picker :show="isSex" immediateChange @confirm="setSex" @cancel="isSex = false" :columns="sexList"></u-picker>
    <!-- 工作类型 -->
    <u-picker :show="isConstell" immediateChange @confirm="setConstell" @cancel="isConstell = false"
      :columns="ConstellList"></u-picker>
    <!-- 生日 -->
    <u-datetime-picker immediateChange ref="datetimePicker" @cancel="showBirthday = false" :show="showBirthday"
      :minDate="minDate" :maxDate="maxDate" mode="date" v-model="nowDate" @confirm="setBirthday"></u-datetime-picker>
  </view>
</template>

<script>
import topStatus from "@/components/topStatus/topStatus.vue";
import inputBox from "./components/input-box.vue";
import Layoutimg from "@/components/Layoutimg/Layoutimg.vue";
import { isCheckImage } from "../../common/imgExamine";
export default {
  components: {
    topStatus,
    inputBox,
    Layoutimg
  },
  tabTop: 0,
  data() {
    let d = new Date('1970/1/1');
    console.log(d);
    let nowD = new Date().getTime();
    return {
      teamlist: [],
      classdeimg: [],//课程详情
      classimg: [], //课程主图
      lableList: ['停车场', '优质地胶', '吊灯'],
      IsManager: false,
      isConstell: false,
      ConstellList: [['专职', '兼职']],
      minDate: d.getTime(),
      maxDate: nowD,
      nowDate: nowD,
      showBirthday: false,
      isSex: false,
      sexList: [['男', '女']],
      //教练信息
      teinifo: {
        ID: '',
        PhotoUrl: '',
        TrueName: '',
        Resume: '',
        Skills: '',
        Phone: '',
        Sex: '',
        Birthday: '',
        Height: '',
        Weight: '',
        WorkType: '',
      },
      //教练服务
      fuwuData: {
        ProductName: '',
        Price: '',
        Description: '',
        Type: '',
        Images: '',
        ID: '',
      },
      maxCount: 200,
      motiontype: [],
      showmotion: false,
      isshow: false,
      isServer: false,
      sportList: [],
      popuskill: false,
      imgArr: [],
      isreimg: false,
      isteinfo: false,
      isMore: true,
      topCharactersHTML: '', //富文本解析
      topNav: false,
      cache_user: {},
      commit2: false, // 评论输入框控制
      review_id: 0,
      comment_id: 0,
      resData: {
        ServerList: [],
      },
      ossWatermark: '', // 图片前缀
      PageIndex: 1,
      PageSize: 10,
      IsOpenBg: false,
      userid: null,  //自己的ID
      te_userid: null, // 教练的userID
      load: false,
      ID: null,
      navlist: ['课程', '挥友圈', '圈子'],
      navindex: 0,
      relist: [],  // 评论列表
      isrelist: false,
      dynamicList: [], // 动态列表
      isdynamicList: false,
      Skillslist: [],
      idBe64: '',
    };
  },
  onPullDownRefresh() {
    this.dynamicList = []
    this.getDynamicList(this.te_userid)
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 500);

  },
  onReachBottom() {
    if (this.isMore) {
      this.PageIndex++
      this.EvalList()
    }

    // if (this.navindex == 3) {
    //   this.PageIndex++
    //   this.getDynamicList(this.te_userid)
    // } else if (this.navindex == 2) {
    //   this.PageIndex++
    //   this.EvalList()
    // }


  },
  computed: {

    canChoose() {
      const list = this.sportList;
      let num = 0;
      for (let i = 0; i < list.length; i++) {
        if (list[i].checked) {
          num++;
        }
      }
      let yesNo = num >= 3 ? false : true;
      return yesNo;
    },
    numChoose() {
      const list = this.sportList;
      let num = 0;
      for (let i = 0; i < list.length; i++) {
        if (list[i].checked) {
          num++;
        }
      }
      return num;
    },
  },
  async onShow() {
  },
  async onLoad(e) {
    this.ID = e.id
    if (e.navindex) {
      this.navindex = e.navindex
    }
    await this.getDetail(e.id)
    // this.MyTeam()
    this.ossWatermark = this.$ossWatermark
    this.userid = uni.getStorageSync("user").UserID;
    this.cache_user = uni.getStorageSync("user");
    // this.getDynamicList()
    this.IsCompanyAdmin()
    this.EvalList()
    this.getSportType()
  },
  onPageScroll(e) {
    //nvue暂不支持滚动监听，可用bindingx代替
    if (e.scrollTop > this.lastScrollTop) {
      // 向下滚动
      if (e.scrollTop >= 100) {
        this.topNav = true; // 你的逻辑
      }
      this.IsOpenBg = false; // 滚动条向上滚时执行的逻辑
    } else {
      // 向上滚动
      if (e.scrollTop < 100) {
        this.topNav = false; // 你的逻辑
      }
    }
    this.lastScrollTop = e.scrollTop <= 0 ? 0 : e.scrollTop;
  },
  onShareAppMessage(e) {
    // let id = this.ID;
    // let Name = this.$util.entitiesToUtf16(this.resData.TrueName);
    // if (this.resData.Sex == "女") {
    //   return {
    //     title: `${Name}给你推荐了一位教练美女`,
    //     path: `/pages/teacher/detail?pid=${id}&id=${this.resData.ID}`,
    //     imageUrl: this.resData.PhotoUrl,
    //   };
    // } else {
    //   return {
    //     title: `${Name}给你推荐了一位教练高手`,
    //     path: `/pages/teacher/detail?pid=${id}&id=${this.resData.ID}`,
    //     imageUrl: this.resData.PhotoUrl,
    //   };
    // }
    let trendsId = e.target.dataset.id;
    let o = this.dynamicList.find((item) => item.ID == trendsId);
    let pid = uni.getStorageSync("user").UserID;
    let shareTitle = "挥友精彩瞬间，您不容错过";
    let sharePath = "pages/dynamic/detail?pid=" + pid + "&id=" + trendsId;
    let shareImg =
      o.IsVideo == 1
        ? JSON.parse(o.Images)[0] +
          "?x-oss-process=video/snapshot,t_1,m_fast,ar_auto"
        : JSON.parse(o.Images)[0];
    return {
      title: shareTitle,
      path: sharePath,
      imageUrl: shareImg,
    };
  },
  //分享朋友圈
  onShareTimeline() {
    let Name = this.$util.entitiesToUtf16(this.resData.Name);
    return {
      title: `${Name}给你推荐了一位教练${this.resData.Sex == "女" ? '美女' : '高手'}`,
      query: "id=" + this.ID + '&isShare=1',
    };
  },
  methods: {
     gotovideo(item){
      let src = this.resData.ServerList[0].Video
      this.nav_to('/pages/album/myVideo?src='+src)
    },
    gotovideo2(item){
      let src = JSON.parse(item.Images)[0]
      this.nav_to('/pages/album/myVideo?src='+src)
    },
    //视频播放
    videoPlay(index){
      let video = uni.createVideoContext("video"+index,this)
      // video.play();
      for (let i = 0; i < this.dynamicList.length; i++) {
        if(i !=index){
          let video2 = uni.createVideoContext("video"+i,this)
          video2.pause()
        }
        
      }
    },
    imglist1(e) {
      if (!e) {
        return []
      }
      let list = e.slice(0, 6)
      return list
    },
    //教练的圈子
    async MyTeam() {
      this.teamlist = []
      let res = await this.$api.post("Team/UserTeam", {
        UserID:this.resData.UserID
      })
      if (res.code == 0) {
        this.teamlist = res.data
      }
    },
    async GetBase64ForID(id) {
      let res = await this.$api.post('Common/ConvertBase64', {
        Value_Data: id
      })
      if (res.code == 0) {
        this.idBe64 = res.data
      }
    },
    //打电话
    callNumber() {
      uni.makePhoneCall({
        phoneNumber: this.resData.Phone,
        // phoneNumber: '15572847621',
        success: () => {
        },
        fail: () => {
          console.error('拨打电话失败！');
        },
      });
    },
    async IsCompanyAdmin() {
      let res = await this.$api.post('Company/IsCompanyAdmin');
      if (res.data)
        this.IsManager = true;
    },
    setConstell(e) {
      this.teinifo.WorkType = e.value[0];
      this.isConstell = false;
    },
    async setBirthday(e) {
      console.log(e.value);
      this.teinifo.Birthday = await uni.$u.date(e.value, 'yyyy-mm-dd');
      this.showBirthday = false;
    },
    //性别选择
    setSex(e) {
      this.teinifo.Sex = e.value[0];
      this.isSex = false;
    },
    //修改技能
    async confimskill() {
      let Skillist = [];
      for (let i = 0; i < this.sportList.length; i++) {
        if (this.sportList[i].checked) {
          Skillist.push(this.sportList[i].Code);
        }
      }
      if (Skillist.length == 0) {
        this.$pv.msg("请至少一个技能");
        return;
      }
      let skillString = Skillist.join(",");
      let _this = this
      uni.showModal({
        title: "温馨提示",
        content: '您确定要修改技能吗？',
        confirmText: "确定",
        success: async function (res) {
          if (res.confirm) {
            let res1 = await _this.$api.post('Technicians/SetSkills', {
              ID: _this.ID,
              Skills: skillString
            })
            if (res1.code == 0) {
              _this.$pv.msg('修改成功');
              _this.getDetail(0)
              _this.$refs["skillBox"].close();
            }
          } else if (res.cancel) {
          }
        },
      });
    },
    // 修改形象照片
    async confTeres() {
      if (this.imgArr.length < 3) {
        this.$pv.msg('至少选择三张照片');
        return
      }
      let imglist = [];
      for (let i = 0; i < this.imgArr.length; i++) {
        imglist.push(this.imgArr[i].netPath);
      }
      let imgstring = imglist.join(",");
      let _this = this
      uni.showModal({
        title: "温馨提示",
        content: '您确定要形象照片吗？',
        confirmText: "确定",
        success: async function (res) {
          if (res.confirm) {
            let res1 = await _this.$api.post('Technicians/SetResume', {
              ID: _this.ID,
              Resume: imgstring
            })
            if (res1.code == 0) {
              _this.$pv.msg('修改成功');
              _this.getDetail(0)
              _this.$refs["coachImgBox"].close();
            }
          } else if (res.cancel) {
          }
        },
      });
    },
    //教练资料修改
    async confTeinfo() {
      let _this = this
      uni.showModal({
        title: "温馨提示",
        content: '您确定要修改信息吗？',
        confirmText: "确定",
        success: async function (res) {
          if (res.confirm) {
            let res1 = await _this.$api.post('Technicians/Edit', _this.teinifo)
            if (res1.code == 0) {
              _this.$pv.msg('修改成功');
              _this.getDetail(0)
              _this.$refs.coachInfoBox.close();
              // _this.isteinfo = false
            }
          } else if (res.cancel) {
          }
        },
      });
      // let res = await this.$api.post('Technicians/Edit',this.teinifo)
    },
    //删除服务
    async DeleteServer(id) {
      let _this = this
      uni.showModal({
        title: "温馨提示",
        content: '您确定要删除该服务吗？',
        confirmText: "确定",
        success: async function (res) {
          if (res.confirm) {
            let res1 = await _this.$api.post('Technicians/DeleteServerItem', {
              ID: id,
            })
            if (res1.code == 0) {
              _this.$pv.msg('删除成功');
              _this.getDetail(0)
            }
          } else if (res.cancel) {
          }
        },
      });
    },
    async Eval() {
      if (!this.fuwuData.Type) {
        this.$pv.msg('请选择运动项目');
        return
      }
      if (!this.fuwuData.ProductName) {
        this.$pv.msg('请填写项目名称');
        return
      }
      if (!this.fuwuData.Price) {
        this.$pv.msg('请填写费用');
        return
      }
      if (!Number(this.fuwuData.Price)) {
        this.$pv.msg('请填写正确的数字');
        return
      }
      if (this.fuwuData.Price < 0) {
        this.$pv.msg('请填写费用必须大于0');
        return
      }
      if (this.classimg.length == 0) {
        this.$pv.msg('请至少选择一张课程主图');
        return
      }
      if (this.classdeimg.length == 0) {
        this.$pv.msg('请至少选择一张课程详情图');
        return
      }
      let classimglist = []
      for (let i = 0; i < this.classimg.length; i++) {
        classimglist.push(this.classimg[i].netPath);
      }
      let classstring = classimglist.join(",");
      this.fuwuData.Images = classstring
      let classdeimglist = []
      for (let i = 0; i < this.classdeimg.length; i++) {
        classdeimglist.push(this.classdeimg[i].netPath);
      }
      let classsdetring = classdeimglist.join(",");
      this.fuwuData.Description = classsdetring
      let data = JSON.parse(JSON.stringify(this.fuwuData))
      let proString = this.$util.utf16ToEntities(data.ProductName)
      data.ProductName = proString
      let _this = this
      uni.showModal({
        title: "温馨提示",
        content: '您确定要添加该服务吗？',
        confirmText: "确定",
        success: async function (res) {
          if (res.confirm) {
            let res1 = await _this.$api.post('Technicians/AddServerItem', data)
            if (res1.code == 0) {
              _this.$pv.msg('添加成功');
              _this.fuwuData.ProductName = '',
                _this.fuwuData.Type = ''
              _this.fuwuData.Price = '',
                _this.fuwuData.Description = ''
              _this.fuwuData.Images = ''
              _this.classimg = []
              _this.classdeimg = []
              _this.getDetail(0)
              _this.$refs["serveBox"].close();
            }
          } else if (res.cancel) {
          }
        },
      });
    },
    inputrem(e) {
      const { value, cursor } = e.detail
      let str = this.$util.entitiesToUtf16(value)
      if (str.length > 200) {
        this.fuwuData.Description = str.slice(0, 200)
      } else {
        this.fuwuData.Description = str
      }

      // this.reqData.Remark
    },
    setmotion(e) {
      console.log(e, '111');
      this.fuwuData.ProductName = e.value[0];
      this.fuwuData.Type = e.value[0]
      // let isindex = this.serverlist.some((item,index)=>{
      //     return e.value[0] == item.ProductName
      // })
      // if(!isindex){
      //     this.reqData.ProductName = e.value[0];
      //     this.reqData.Type = e.value[0]
      // }else{
      //     this.$pv.msg('你已添加过此项目，请重新选择');
      // }


      this.showmotion = false;
    },

    async getSportType() {
      let res = await this.$api.post("Catalog/GetDictionary", {
        Type: "SportType",
      });
      let tmp_dic = [];
      if (res.code == 0) {
        this.sportList = res.data;
        for (let i = 0; i < this.sportList.length; i++) {
          tmp_dic.push(this.sportList[i].Code)
          this.$set(
            this.sportList[i],
            "checked",
            this.Skillslist.includes(this.sportList[i].Code)
          );
        }
        this.motiontype.push(tmp_dic);
      }
    },
    skitype(Code, checked) {
      let list = this.sportList;
      const maxNum = 3;
      if (!checked && !this.canChoose) {
        this.$pv.msg("最多选" + maxNum + "个标签");
        return;
      }
      for (let i = 0; i < list.length; i++) {
        list[i].checked =
          list[i].Code == Code ? !list[i].checked : list[i].checked;
      }
    },
    openSkill() {
      this.$refs["skillBox"].open();
    },
    // 打开编辑资料
    openCoach() {
      this.$refs["coachInfoBox"].open();
    },
    // 打开编辑教练形象照
    openCoachImg() {
      this.$refs["coachImgBox"].open();
    },
    // 打开服务弹窗
    openServeBox() {
      this.$refs["serveBox"].open();
    },

    // 文件上传
    async uploading(url, tempKey) {
      console.log("url ----------" + url);

      const r = await this.$upload(url, (pro) => {
        this.imgArr.forEach((item) => {
          if (item.tempKey == tempKey) {
            item.pro = pro;
          }
        });
      });
      this.imgArr.forEach((item) => {
        if (item.tempKey == tempKey) {
          item.netPath = r;
        }
      });

      console.log("upload file " + r);
    },
    async classuploading(url, tempKey) {
      console.log("url ----------" + url);

      const r = await this.$upload(url, (pro) => {
        this.classimg.forEach((item) => {
          if (item.tempKey == tempKey) {
            item.pro = pro;
          }
        });
      });
      this.classimg.forEach((item) => {
        if (item.tempKey == tempKey) {
          item.netPath = r;
        }
      });

      console.log("upload file " + r);
    },
    async classupdeloading(url, tempKey) {
      console.log("url ----------" + url);

      const r = await this.$upload(url, (pro) => {
        this.classdeimg.forEach((item) => {
          if (item.tempKey == tempKey) {
            item.pro = pro;
          }
        });
      });
      this.classdeimg.forEach((item) => {
        if (item.tempKey == tempKey) {
          item.netPath = r;
        }
      });

      console.log("upload file " + r);
    },
    //课程详情图
    selectclassde_APP() {
      let sumlen = this.classdeimg.length
      let _this = this;
      uni.showActionSheet({
        itemList: ["选择照片", "取消"],
        success: function (res) {
          if (res.tapIndex == 0) {
            let ind = 1;
            uni.chooseImage({
              // count:  允许上传的照片数量
              count: 9 - sumlen,
              // sizeType:  original 原图，compressed 压缩图，默认二者都有
              sizeType: ["original", "compressed"],
              sourceType: ["album"],
              success(res) {
                console.log(res);
                res.tempFiles.forEach(async (item) => {
                  let o = {
                    duration: 0,
                    fileType: "image",
                    tempUrl: item.path,
                    flieUrl: item.path,
                    tempKey: uni.$u.guid(8),
                    pro: 0,
                  };

                  _this.classdeimg.push(o);

                let rex = await _this.classupdeloading(o.flieUrl, o.tempKey);
                });
              },
            });
            return;
          }
        },
        fail: function (res) { },
      });
    },
    classdeupload() {
      let sumlen = this.classdeimg.length
      let _this = this;
      uni.chooseMedia({
        count: 9 - sumlen,
        mediaType: ["image"],
        sourceType: ["album", "camera"],
        maxDuration: 30,
        camera: "back",
        success(res) {
          console.log(res);
          res.tempFiles.forEach(async (item) => {
            let o = {
              duration: 0,
              fileType: item.fileType,
              tempUrl: item.tempFilePath,
              flieUrl: item.tempFilePath,
              tempKey: uni.$u.guid(8),
              pro: 0,
            };

            _this.classdeimg.push(o);

            let rex = await _this.classupdeloading(o.flieUrl, o.tempKey);
            console.log("rex-------", rex);
          });
        },
      });
    },
    //课程主图
    selectclass_APP() {
      let sumlen = this.classimg.length
      let _this = this;
      uni.showActionSheet({
        itemList: ["选择照片", "取消"],
        success: function (res) {
          if (res.tapIndex == 0) {
            let ind = 1;
            uni.chooseImage({
              // count:  允许上传的照片数量
              count: 9 - sumlen,
              // sizeType:  original 原图，compressed 压缩图，默认二者都有
              sizeType: ["original", "compressed"],
              sourceType: ["album"],
              success(res) {
                console.log(res);
                res.tempFiles.forEach(async (item) => {
                  let o = {
                    duration: 0,
                    fileType: "image",
                    tempUrl: item.path,
                    flieUrl: item.path,
                    tempKey: uni.$u.guid(8),
                    pro: 0,
                  };

                 _this.classimg.push(o);

                let rex = await _this.classuploading(o.flieUrl, o.tempKey);
                });
              },
            });
            return;
          }
        },
        fail: function (res) { },
      });
    },
    classupload() {
      let sumlen = this.classimg.length
      let _this = this;
      uni.chooseMedia({
        count: 9 - sumlen,
        mediaType: ["image"],
        sourceType: ["album", "camera"],
        maxDuration: 30,
        camera: "back",
        success(res) {
          console.log(res);
          res.tempFiles.forEach(async (item) => {
            let o = {
              duration: 0,
              fileType: item.fileType,
              tempUrl: item.tempFilePath,
              flieUrl: item.tempFilePath,
              tempKey: uni.$u.guid(8),
              pro: 0,
            };

            _this.classimg.push(o);

            let rex = await _this.classuploading(o.flieUrl, o.tempKey);
            console.log("rex-------", rex);
          });
        },
      });
    },
    upload() {
      let _this = this;
      uni.chooseMedia({
        count: 9 - this.imgArr.length,
        mediaType: ["image"],
        sourceType: ["album", "camera"],
        maxDuration: 30,
        camera: "back",
        success(res) {
          console.log(res);
          res.tempFiles.forEach(async (item) => {
            let o = {
              duration: 0,
              fileType: item.fileType,
              tempUrl: item.tempFilePath,
              flieUrl: item.tempFilePath,
              tempKey: uni.$u.guid(8),
              pro: 0,
            };

            _this.imgArr.push(o);

            let rex = await _this.uploading(o.flieUrl, o.tempKey);
            console.log("rex-------", rex);
          });
        },
      });
    },
    selectImg_APP() {
      let _this = this;
      uni.showActionSheet({
        itemList: ["选择照片", "取消"],
        success: function (res) {
          if (res.tapIndex == 0) {
            let ind = 1;
            uni.chooseImage({
              // count:  允许上传的照片数量
              count: 9 - this.imgArr.length,
              // sizeType:  original 原图，compressed 压缩图，默认二者都有
              sizeType: ["original", "compressed"],
              sourceType: ["album"],
              success(res) {
                console.log(res);
                res.tempFiles.forEach(async (item) => {
                  let o = {
                    duration: 0,
                    fileType: "image",
                    tempUrl: item.path,
                    flieUrl: item.path,
                    tempKey: uni.$u.guid(8),
                    pro: 0,
                  };

                  _this.imgArr.push(o);

                  let rex = await _this.uploading(o.flieUrl, o.tempKey);
                });
              },
            });
            return;
          }
        },
        fail: function (res) { },
      });
    },
    delImg(i) {
      this.imgArr.splice(i, 1);
      // this.formdata.PhotoUrl.splice(i, 1);
    },
    delclassimg(i) {
      this.classimg.splice(i, 1);
    },
    delclassdeimg(i) {
      this.classdeimg.splice(i, 1);
    },
    //关闭遮罩层
    closeshadow() {
      this.isteinfo = false
      this.isreimg = false
      this.isshow = false
    },
    // 修改头像
    async chooseavatar(e) {
      console.log(e);
      try {
        let _this = this;
        let pathlist = [{ path: e.detail.avatarUrl }];
        let res = await isCheckImage(pathlist, "all");
        // let res = await ieChooseImage(1,'all');
        console.log("---------鉴别", res);
        if (res[0]?.code == 0) {
          _this.teinifo.PhotoUrl = res[0]?.url;
          _this.isHeader = true;
        } else {
          uni.showToast({
            title: res[0]?.msg,
            icon: "none",
            duration: 2000,
          });
        }
      } catch (error) {
        this.$pv.msg("图片上传失败");
        console.log(error);
      }
    },
    //绑定手机
    getNums(e) {
      console.log(e, 'eee');
      let _this = this;
      uni.login({
        provider: "weixin",
        success: async (res) => {
          let d = {
            encryptedData: e.detail.encryptedData,
            code: res.code,
            aesIv: e.detail.iv,
          };
          let res3 = await _this.$api.post("User/GetPhoneNumber", d);
          if (res3.data) {
            _this.teinifo.Phone = res3.data;
            _this.$pv.msg("获取成功");
          } else {
            _this.$pv.msg("获取失败");
          }
        },
        fail: (err) => {
          uni.showModal({
            content: "获取失败",
            showCancel: false,
          });
        },
      });
    },


    lookimg(url, index, number) {
      let arr = []
      for (let i = 0; i < url.length; i++) {
        arr.push(url[i]+ '?x-oss-process=image/resize,w_1080,h_1350/watermark,image_dXBsb2FkLzE3MjE0NjQ4MTI0MjcxMzQyLnBuZz94LW9zcy1wcm9jZXNzPWltYWdlL3Jlc2l6ZSxQXzEy,g_se,x_30,y_35' + '/watermark,text_5oyl5Y2h5Y-377ya' + this.idBe64 + ',size_16,color_EFEFEF,x_35,y_10')
      }
      // arr = arr.map(item => item + this.ossWatermark)
      uni.previewImage({
        urls: arr,
        current: index,
      });
    },
    // 图片字段截取返回数组
    restoreImg(Images) {
      let str = Images || '';
      if (str.includes('.png') || str.includes('.jpg') || str.includes('.jpeg') || str.includes('.webp')) {
        let imglist = Images.split(',') || []
        
        return imglist
      } else {
        return []
      }

    },
    changeImg() {
      try {
        let _this = this;
        uni.chooseImage({
          count: 1, //默认9
          mediaType: ["image"],
          sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
          sourceType: ["camera", "album"], //从相册选择
          success: async function (res) {
            let upImg = await _this.$upload(res.tempFiles[0].path, (res) => { });
            _this.subFix(upImg);
          },
        });
      } catch (error) {
        this.$pv.msg("图片上传失败");
      }
    },
    async subFix(BgImg) {
      let res = await this.$api.post("User/UpdateUserBG", { BgImg });
      if (res.code == 0) {
        this.resData.BgImg = BgImg;
        this.$pv.msg("修改成功");
      }
    },
    //跳转页面
    gote_reserva(navindex, index, skliiID, Price) {
      if (this.userid == this.te_userid) {
        this.$pv.msg("无法对自己的服务进行预约");
        return
      }
      let _this = this
      let isAuth = uni.getStorageSync('user').IsAuth
      if (isAuth != 1) {
        uni.showModal({
          title: "温馨提示",
          content: "未注册用户不能预约，请先注册账号",
          confirmText: "关闭",
          cancelText: "注册账号",
          success: function (res) {
            if (res.confirm) {
              uni.navigateBack({
                delta: 1,
              });
            } else if (res.cancel) {
              _this.nav_to("/pages/start/start2");
            }
          },
        });
      } else {
        this.nav_to('/pages/teacher/te_reserva?skillindex=' + index + '&skillid=' + skliiID + '&skillprice=' + Price + '&id=' + this.ID + '&navindex=' + navindex)
        // this.nav_to('/pages/teacher/course_details?id='+skliiID)
      }
    },
    getTime2(l) {
      let d = new Date(l);
      let timestamp = d.getTime();
      return this.$util.unixDatetime(timestamp, 'year');
    },
    //教练评价列表
    async EvalList() {
      // this.isrelist = false
      let res = await this.$api.post('Technicians/EvalList', {
        TechnicianID: this.ID,
        PageIndex: this.PageIndex,
        PageSize: this.PageSize,
      })
      if (res.code == 0) {
        this.relist = this.relist.concat(res.data)
        this.isMore =
          Array.isArray(res.data) && res.data.length >= this.PageSize;
        this.isrelist = true
      }
    },
    // 获取教练信息详情
    async getDetail(e) {
      let id = e == 0 ? this.ID : e
      this.imgArr = []
      let res = await this.$api.post("Technicians/Detail", {
        ID: id,
      });
      const { code, data } = res;
      console.log(res, 'res');
      if (code == 0) {
        this.resData = data
        this.load = true
        this.teinifo.ID = data.ID
        this.teinifo.PhotoUrl = data.PhotoUrl
        this.teinifo.TrueName = this.$util.entitiesToUtf16(data.TrueName)
        this.teinifo.Resume = data.Resume
        this.teinifo.Skills = data.Skills
        this.teinifo.Phone = data.Phone
        this.teinifo.Sex = data.Sex
        this.teinifo.Birthday = this.$util.unixDatetime(data.Birthday, 'year')
        this.teinifo.Height = data.Height
        this.teinifo.Weight = data.Weight
        this.teinifo.WorkType = data.WorkType


        this.te_userid = data.UserID
        this.GetBase64ForID(this.te_userid)
        this.Skillslist = data.Skills.split(',')
        let imgdeList = data.Resume.split(",");
        for (let i = 0; i < imgdeList.length; i++) {
          const imgdata = {
            duration: 0,
            fileType: "image",
            flieUrl: imgdeList[i],
            tempUrl: imgdeList[i],
            netPath: imgdeList[i],
          };
          this.imgArr.push(imgdata);
        }
        this.getDynamicList(data.UserID)
      }
    },
    //返回上一页
    goBack() {
      const pages = getCurrentPages();
      if (pages.length > 1) {
        // 如果页面栈长度大于1，则说明有上一页，可以返回
        uni.navigateBack();
      } else {
        // 如果没有上一页，则导航到首页
        uni.reLaunch({
          url: '/pages/tab/home'
        });
      }
    },
    //列表切换
    navswitch(index) {
      this.navindex = index
      if (index == 0) {

      } else if (index == 2) {
        this.MyTeam()
      } else if (index == 1) {
        this.dynamicList = []
        this.PageIndex = 1
        this.getDynamicList(this.te_userid)
      }
    },
    btnswitch() {
      this.navindex = 0
    },
    //朋友圈
    async getDynamicList(id) {
      // this.isdynamicList = false
      let res = await this.$api.post("Community/UserCommunity", {
        UserID: id,
        PageIndex: this.PageIndex,
        PageSize: this.PageSize,
        CompanyID: 6003,
      });
      if (res.code == 0) {
        let l = this.dynamicList.concat(res.data);
        this.dynamicList = this.clearRepetition(l, "ID");
        this.dynamicLength = this.dynamicList.length;
        this.isdynamicList = true
      }

      // this.$pv.closeLoad();
    },
    // 去重,后面的覆盖前面的
    clearRepetition(arr, key = "id") {
      let newArr = [];
      arr.forEach((item) => {
        let index;
        let check = newArr.every((newItem, i) => {
          if (item[key] !== newItem[key]) {
            index = -1;
            return true;
          } else {
            index = i;

            return false;
          }
        });
        if (check) {
          newArr.push(item);
        } else {
          newArr.splice(index, 1, item);
        }
      });
      return newArr;
    },
    async submit(val) {
      if (val != "") {
        let utf16 = this.$util.utf16ToEntities(val).slice(0, 200);
        let res = await this.$api.post("/Community/UserComment", {
          CommunityID: this.review_id,
          Content: utf16,
          CompanyID: 6002,
          ReplyID: this.comment_id,
        });
        if (res.code == 0) {
          console.log("user====>", res);
          this.dynamicList.forEach((item, index) => {
            if (item.ID == this.review_id) {
              item.CommunityComments.push({
                UserID: uni.getStorageSync("user").UserID,
                HeadImgUrl: uni.getStorageSync("user").HeadImgUrl,
                Name: uni.getStorageSync("user").Name,
                Content: val,
                CreateTime: new Date(),
                ReplyID: this.comment_id,
                Pre_Name: this.repName,
                ID: res.data
              });
              this.dynamicList.splice(index, 1, item);
              console.log(item.ID, this.review_id);
            }
          });

          this.commit2 = !this.commit2;
        }
      } else {
        this.$pv.msg("评论不能为空");
      }
    },
    onBlur(emit) {
      setTimeout(() => {
        this.commit2 = emit;
      }, 500)

    },
    // 评论
    tocommit(ID, C_ID) {
      let user = uni.getStorageSync("user");
      if (user.IsAuth == 0) {
        uni.showModal({
          title: "温馨提示",
          content: "您还没注册，请先注册",
          confirmText: "确定",
          success: (rs) => {
            if (rs.confirm) {
              this.nav_to("/pages/start/start2");
            }
          },
        });
        return;
      }
      this.commit2 = !this.commit2;
      this.review_id = ID;
      this.comment_id = C_ID;
    },
    //回复消息
    comment_edit(index, c_index, Name = "") {
      let _this = this;
      _this.repName = Name;
      const user = uni.getStorageSync("user");

      const item = this.dynamicList[index].CommunityComments[c_index];

      if (user.ID == item.UserID) {
        uni.showActionSheet({
          itemList: ["删除评论"],
          success: function (res) {
            if (res.tapIndex == 0) {
              _this.delReview(index, c_index);

              return;
            }
          },
          fail: function (res) { },
        });
      } else {
        //直接回复
        this.tocommit(item.CommunityID, item.ID);
      }
    },
    async delReview(index, c_index) {
      const item = this.dynamicList[index].CommunityComments[c_index];
      //console.log(item,"评论删除");
      let res = await this.$api.post("/Community/DeletePage", {
        ID: item.ID,
      });
      this.$pv.msg("删除成功");

      this.dynamicList[index].CommunityComments.splice(c_index, 1);
    },
    // 点赞
    async zan(item) {
      this.zan_id = item;
      let user = uni.getStorageSync("user");
      if (user.IsAuth == 0) {
        uni.showModal({
          title: "温馨提示",
          content: "您还没注册，请先注册",
          confirmText: "确定",
          success: (rs) => {
            if (rs.confirm) {
              this.nav_to("/pages/start/start2");
            }
          },
        });
        return;
      }
      let res = await this.$api.post("Community/ZAN", {
        ID: item,
      });

      if (JSON.stringify(res.data) == "true") {
        this.$pv.msg("点赞成功");

        this.dynamicList.forEach((item, index) => {
          if (item.ID == this.zan_id) {
            item.IsMyZAN = 1;
            item.CommunityZAN.push({
              UserID: this.cache_user.UserID,
              HeadImgUrl: this.cache_user.HeadImgUrl,
            });
            this.dynamicList.splice(index, 1, item);
          }
        });
      } else {
        this.$pv.msg(res.message);
      }
    },
  },
};
</script>

<style lang="scss">
page {
  background: #fefefe;
}

button::after {
  border: none;
}

button[plain] {
  border: 0;
}
.video_box {
  width: 100%;
  height: 500rpx;
  position: relative;
  z-index: 2;
  margin-top: 10rpx;
  video {
    width: 50%;
    height: 100%;
    // margin-top: 10rpx;
    
  }
}
.servideo_box {
  width: 220rpx;
  height: 300rpx;
  position: relative;
  z-index: 2;

  video {
    width: 220rpx;
    height: 300rpx;
    // margin-top: 10rpx;

  }
  .v_imgbox{
    // width: 70%;
    position: relative;
  }
  .videoimg{
    display: block;
    width: 220rpx;
    height: 300rpx;
    border-radius: 16rpx;
  }
  .playimg{
      width: 96rpx;
      height: 96rpx;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
}
.v_imgbox2{
    width: 70%;
    position: relative;
  }
  .videoimg2{
    display: block;
    // width: 220rpx;
    // height: 300rpx;
    // border-radius: 16rpx;
  }
  .playimg2{
      width: 96rpx;
      height: 96rpx;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }

.blackshadow {
  width: 100%;
  height: 300vh;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
}

.group_textarea_2 {
  height: 264rpx;
  margin-top: 30rpx;
  // background-color: #fff;
  // padding-left: 32rpx;
  // text-indent: 2em;
  box-sizing: border-box;
  position: relative;

  .lab {
    padding-right: 10rpx;
    color: #333333;
    font-size: 32rpx;
    font-weight: 500;
  }

  .count {
    position: absolute;
    bottom: 15rpx;
    right: 15rpx;
    font-size: 24rpx;
    color: #C2C2C2;
  }

  /deep/ .u-textarea {
    background: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-bottom: none !important;
    padding: 0 !important;
    height: 100% !important;
    text-indent: 2em;
  }

  /deep/ .u-textarea__count {
    background: none !important;
    color: #0d0d0d !important;
  }

  /deep/ .u-textarea__field {
    color: #0d0d0d !important;
    font-size: 28rpx !important;
    height: 100% !important;
  }
}

.group_2 {
  display: flex;
  align-items: center;
  height: 104rpx;
  border-bottom: 1rpx solid #E4E4E4;

  &:last-child {
    border-bottom: none;
  }

  .text5 {
    font-size: 28rpx;
    font-weight: 500;
    color: #333333;
  }

  .text6 {
    font-size: 28rpx;
    font-weight: 500;
    color: #C2C2C2;
  }

  .unit {
    color: #333333;
    font-weight: 500;
    font-size: 28rpx;
    padding-right: 10rpx;
    margin-right: 10rpx;
  }

  .lab {
    padding-right: 10rpx;
    color: #333333;
    font-size: 32rpx;
    font-weight: 500;
  }

  .inp_box {
    flex: 1;

    input {
      width: 100%;
      color: #333333;
      text-align: right;
      font-weight: 500;
    }
  }

  .icon_box {
    height: 40rpx;
    width: 40rpx;
    line-height: 40rpx;
  }
}

.Eval {
  width: 400rpx;
  height: 88rpx;
  background: #706EEE;
  border-radius: 44rpx;
  text-align: center;
  line-height: 88rpx;
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;
  margin: 20rpx auto;
}

.bottombox {
  width: 96vw;
  margin: 0 auto;
  background-color: #fff;
  padding: 0 32rpx 30rpx 34rpx;
  box-sizing: border-box;
  height: fit-content;
  border-radius: 18rpx;
}

.bottombox .group:last-child {
  border-bottom: none;
}

.teeidebtn {
  width: 182rpx;
  min-width: 182rpx;
  height: 64rpx;
  background: #706EEE;
  border-radius: 32rpx;
  text-align: center;
  line-height: 64rpx;
  color: #fff;
  font-size: 28rpx;
  margin: 40rpx auto;
  margin-bottom: 0;
}

.teeidebtn2 {
  width: 182rpx;
  min-width: 182rpx;
  height: 64rpx;
  background: #706EEE;
  border-radius: 32rpx;
  text-align: center;
  line-height: 64rpx;
  color: #fff;
  font-size: 28rpx;
  margin: 0 auto;
}

.user_edit {
  background: #fff;
  width: 100%;
  border-radius: 18rpx;
  padding: 20rpx 32rpx;

}

.tip {
  margin-top: 32rpx;
  height: 70rpx;
  background: #fff7e0;
  border-radius: 4rpx;
  color: #e3a029;
  line-height: 70rpx;
  text-align: center;
}

.user_header_btn {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  border-radius: 0;

  .user_headerimg {
    display: flex;
    align-items: center;
  }
}

.user_header,
.cover_btn {
  border-radius: 10rpx;
  overflow: hidden;
  height: 100rpx;
  width: 100rpx;
  background: rgba(255, 255, 255, 0.1);
  margin-right: 16rpx;
  display: flex;
  // text-align: center;
  justify-content: center;
  align-items: center;

  .iamge_icon {
    height: 60rpx;
    width: 60rpx;
  }

  .image_user {
    height: 100%;
    width: 100%;
    border-radius: 50%;
  }
}

.lab {
  // height: 90rpx;
  // line-height: 90rpx;
  padding-right: 10rpx;
  color: #333333;
  font-size: 32rpx;
  display: flex;

  .must {
    color: #ef4034;
    font-size: 32rpx;
    margin-top: 7rpx;
  }

  .msg {
    display: inline-block;
    padding-left: 10rpx;
    font-size: 28rpx;
    color: #dd3232;
  }
}

.group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  position: relative;

  &::after {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 2rpx;
    content: "";
    transform: scaleY(0.6);
    background-color: #e4e4e4;
  }

  .inp_box {
    flex: 1;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: flex-end;

    input {
      width: 100%;
      text-align: right;
      padding: 32rpx 0;
      color: #333;
      font-size: 32rpx;
    }

    .inp_text {
      font-size: 32rpx;
      padding: 32rpx 0;
    }

    .radio_s {
      display: flex !important;
      height: 100rpx;
    }

    .item_check {
      padding: 10rpx;
      display: flex;
      flex-direction: row;

      .desc {
        color: #000 !important;
      }
    }
  }

  .diyPadding {
    padding: 32rpx 0;
  }

  .icon_box {
    height: 40rpx;
    width: 40rpx;
    line-height: 40rpx;
  }

  .inp_append {
    margin-left: 8rpx;
  }

  .s_btn {
    color: #fff;
    font-size: 24rpx;
    width: 170rpx !important;
    height: 60rpx !important;
    border-radius: 5rpx;
    background-color: #706eee;
    margin: 0 0 0 20rpx;
  }
}

.group_check {
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  line-height: 90px;
  height: 190rpx;

  .inp_box_c {
    flex: 1;
    display: flex;
    flex-direction: column;

    view {
      height: 70rpx;
      color: #666666;
    }

    input {
      width: 100%;
      text-align: right;
    }
  }
}

.group_img {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  line-height: 180rpx;

  &::after {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 2rpx;
    content: "";
    transform: scaleY(0.6);
    background-color: #e4e4e4;
  }

  .wxlab {
    height: 60rpx;
    padding-right: 10rpx;
    color: #333333;
    font-size: 32rpx;
    line-height: 60rpx;

    .must {
      color: #ef4034;
      font-size: 32rpx;
    }

    .desc {
      color: #dc7e78;
      font-size: 28rpx;
    }

    .req_t {
      color: #ff557f !important;
    }
  }

  .inp_box {
    flex: 1;
    display: flex;
    align-items: center;

    input {
      padding: 32rpx 0;
      width: 100%;
      text-align: right;
    }
  }

  .inp_box_c {
    flex: 1;
    display: flex;
    flex-direction: column;

    view {
      height: 70rpx;
    }

    input {
      width: 100%;
      text-align: right;
    }
  }
}

.group_hd {
  height: auto;
  padding-bottom: 20rpx;
  padding-top: 20rpx;
}

.m40 {
  margin-top: 50rpx;
}

.group_textarea {
  margin-top: 24rpx;
  flex: 1;
  height: 200rpx;
  padding-top: 12rpx;
  padding-left: 10rpx;
  padding-right: 10rpx;
  // border-style: none;
  border-radius: 16rpx;
  background-color: #f8f8f8;

  /deep/ .u-textarea {
    background: none !important;
    // border-bottom: none !important;
    // border-color: rgba(64, 64, 64, 1) !important;
    padding-left: 20rpx;
  }

  /deep/ .u-border {
    border: none;
  }

  /deep/ .u-textarea__count {
    background: none !important;
    color: #000 !important;
  }

  /deep/ .u-textarea__field {
    color: #000 !important;
  }
}

.inp_box_r {
  display: flex;
  justify-content: flex-end;
}

.text_r {
  text-align: right;
}

.group_warp {
  padding-bottom: 20rpx;
  display: block;
  height: auto;
}

.imgvideo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  &::after {
    height: 1px;
    width: 220rpx;
    display: block;
    content: "";
  }

  .item {
    position: relative;
    margin-top: 15rpx;
    width: 220rpx;
    height: 220rpx;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16rpx;

    .pro {
      position: absolute;
      top: 50%;
      width: 100%;
      transform: translateY(-50%);
      text-align: center;
      color: #888;
    }

    image {
      height: 100%;
      width: 100%;
      border-radius: 16rpx;
    }

    .del_con {
      position: absolute;
      top: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.4);
      height: 40rpx;
      width: 40rpx;
      text-align: center;
      line-height: 40rpx;
      border-radius: 0 16rpx 0 16rpx;
    }

    .bottomset {
      position: absolute;
      width: 100%;
      bottom: 0;
      left: 0;
      height: 50rpx;
      background: #404040;
      color: #fff;
      text-align: center;
      align-items: center;
      font-size: 24rpx;
      line-height: 50rpx;
      opacity: 0.7;
    }
  }

  .item_add {
    position: relative;

    &::before,
    &::after {
      display: block;
      content: "";
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      position: absolute;
      height: 40rpx;
      width: 8rpx;
      border-radius: 8rpx;
      background: #fff;
      border-radius: 10rpx;
    }

    &::before {
      transform: rotate(90deg);
    }
  }
}

.iamge_list_sm {
  margin-top: 10rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .tit {
    width: 100%;
    line-height: 2;
  }

  .item {
    height: 90rpx;
    width: 90rpx;

    image {
      height: 100%;
      width: 100%;
    }
  }

  .more {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4rpx;
    background: rgba(254, 240, 188, 0.1);
  }
}

.saveBox {
  position: fixed;
  width: 100%;
  box-sizing: border-box;
  left: 0;
  bottom: 0;
  padding: 20rpx 40rpx 50rpx;
  background-color: #fff;

  .saveBtn {
    width: 100%;
    background: #706eee;
    border-radius: 44rpx;
  }
}

.img_list {
  width: 96vw;
  border-radius: 18rpx;
  padding: 25rpx 25rpx;
  border-top: 1rpx solid #e4e4e4;
  box-sizing: border-box;
  height: fit-content;
  max-height: 1300rpx;
  background-color: #fff;
  margin: 0 auto;

  // padding: 26rpx 32rpx;
  .title {
    font-size: 30rpx;
  }

  image {
    width: 100%;
    height: 100%;
  }

  .img_box {
    display: flex;
    align-items: center;
    // justify-content: space-evenly;
    flex-wrap: wrap;
    overflow-y: auto;
    max-height: 800rpx;
  }

  .videobox {
    padding: 32rpx;
    position: relative;

    >view {
      width: 100%;
      height: 300rpx;
      border-radius: 16rpx;
      overflow: hidden;

      video {
        width: 100%;
        height: 100%;
      }
    }

    .icon {
      position: absolute;
      right: 10rpx;
      top: 10rpx;
      width: 50rpx;
      height: 50rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      // border-radius: 50%;
      z-index: 10;

      image {
        width: 40rpx;
        height: 40rpx;
        background: #fff;
        border-radius: 50%;
      }
    }
  }

  .img {
    // width: 220rpx;
    // height: 300rpx;
    width: 198rpx;
    height: 270rpx;
    border-radius: 8rpx;
    margin-right: 16rpx;
    margin-top: 16rpx;
    // overflow: hidden;
    position: relative;

    image {
      border-radius: 8rpx;
    }

    .icon {
      position: absolute;
      right: -20rpx;
      top: -14rpx;
      width: 50rpx;
      height: 50rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      // border-radius: 50%;
      z-index: 10;

      image {
        width: 40rpx;
        height: 40rpx;
        background: #fff;
        border-radius: 50%;
      }
    }
  }



  .addimg {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f6f6f6;

    image {
      width: 80rpx;
      height: 80rpx;
    }
  }
}
.classtext{
    color: #fc4f45;
		font-size: 24rpx;
    padding-left: 25rpx;
    margin: 10rpx 0;
}
.classimg_list {
  // width: 96vw;
  border-radius: 18rpx;
  padding: 25rpx 25rpx;
  border-top: 1rpx solid #e4e4e4;
  box-sizing: border-box;
  height: fit-content;
  max-height: 1300rpx;
  background-color: #fff;
  margin: 0 auto;
  // padding: 26rpx 32rpx;
  .title {
    font-size: 30rpx;
  }

  image {
    width: 100%;
    height: 100%;
  }

  .img_box {
    display: flex;
    align-items: center;
    // justify-content: space-evenly;
    flex-wrap: wrap;
    overflow-y: auto;
    max-height: 800rpx;
  }

  .videobox {
    padding: 32rpx;
    position: relative;

    >view {
      width: 100%;
      height: 300rpx;
      border-radius: 16rpx;
      overflow: hidden;

      video {
        width: 100%;
        height: 100%;
      }
    }

    .icon {
      position: absolute;
      right: 10rpx;
      top: 10rpx;
      width: 50rpx;
      height: 50rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      // border-radius: 50%;
      z-index: 10;

      image {
        width: 40rpx;
        height: 40rpx;
        background: #fff;
        border-radius: 50%;
      }
    }
  }

  .img {
    // width: 220rpx;
    // height: 300rpx;
    width: 100rpx;
    height: 120rpx;
    border-radius: 8rpx;
    margin-right: 16rpx;
    margin-top: 16rpx;
    // overflow: hidden;
    position: relative;

    image {
      border-radius: 8rpx;
    }

    .icon {
      position: absolute;
      right: -20rpx;
      top: -14rpx;
      width: 50rpx;
      height: 50rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      // border-radius: 50%;
      z-index: 10;

      image {
        width: 40rpx;
        height: 40rpx;
        background: #fff;
        border-radius: 50%;
      }
    }
  }

  // .img:nth-child(3n) {
  //   margin-right: 0;
  // }

  .addimg {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f6f6f6;

    image {
      width: 80rpx;
      height: 80rpx;
    }
  }
}

.sporttext {
  font-size: 36rpx;
  color: #0d0d0d;
  font-weight: bold;
  padding-left: 84rpx;
  padding-top: 35rpx;
  background: white;
  border-radius: 18rpx 18rpx 0 0;
}

.maxtag {
  font-size: 24rpx;
  color: #333333;
}

.sportbox {
  width: 700rpx;
  padding: 58rpx;
  background: white;
  // border-radius: 0 0 18rpx 18rpx;
  display: flex;
  flex-wrap: wrap;

  .sport {
    width: 152rpx;
    height: 72rpx;
    border-radius: 8rpx;
    background-color: #f7f7f7;
    text-align: center;
    line-height: 72rpx;
    color: #333333;
    font-size: 28rpx;
    margin-left: 24rpx;
    margin-bottom: 24rpx;
  }

  .text4 {
    color: #fff !important;
    background-color: #706eee !important;
  }
}




.re_edit {
  width: 160rpx;
  height: 56rpx;
  border-radius: 28rpx;
  // border: 2rpx solid #E6E6E6;
  background-color: #706EEE;
  color: #fff;
  font-size: 28rpx;
  text-align: center;
  line-height: 56rpx;
  margin-left: auto;
}

.re_edit2 {
  width: 160rpx;
  height: 56rpx;
  border-radius: 28rpx;
  // border: 2rpx solid #E6E6E6;
  // background-color: #007bff;
  background-color: #706EEE;
  color: #fff;
  font-size: 28rpx;
  text-align: center;
  line-height: 56rpx;
  margin-left: auto;
}

.re_close {
  width: 160rpx;
  height: 56rpx;
  border-radius: 28rpx;
  border: 2rpx solid #E6E6E6;
  color: #333333;
  font-size: 28rpx;
  text-align: center;
  line-height: 56rpx;
  margin-left: 20rpx;
}

.resimgbox {
  width: 702rpx;
  height: 430rpx;
  margin: 20rpx auto;

  .retextbox {
    display: flex;
    align-items: center;

    .retext {
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
    }
  }

  .imgBoxContent {
    width: 100%;
    overflow-x: auto;
    display: flex;
    align-items: center;
  }

  .teintimgbox {
    // width: 2700rpx;
    // width: 100%;
    height: 350rpx;
    display: flex;
    align-items: center;
  }
}

.Skillsbox {
  width: 702rpx;
  // height: 400rpx;
  margin: 20rpx auto;
  margin-bottom: 40rpx;

  .Skillstextbox {
    display: flex;
    align-items: center;
  }

  .Skillstext {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    margin-bottom: 20rpx;
  }

  .skillcontentbox {
    display: flex;
    align-items: center;
  }

  .skillcont {
    // padding: 6rpx 16rpx;
    width: 120rpx;
    height: 60rpx;
    // background: rgba(0, 0, 0, 0.4);
    border: 1rpx solid #e4e4e4;
    border-radius: 8rpx;
    text-align: center;
    color: #333333;
    font-size: 28rpx;
    margin-right: 15rpx;
    margin-bottom: 8rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.Merchant {
  width: 702rpx;
  margin: 0 auto;
  margin-bottom: 56rpx;

  .mertext {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    margin-bottom: 24rpx;
  }

  .mercenbox {
    width: 710rpx;
    height: fit-content;
    background: #FFFFFF;
    box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.08);
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    padding: 24rpx;

    .shopimg {
      width: 204rpx;
      height: 204rpx;
      border-radius: 16rpx;
      margin-right: 16rpx;
      background-color: antiquewhite;
    }

    .ringhtbox {
      .shopnamebox {
        display: flex;
        align-items: center;
        margin-bottom: 8rpx;

        .shopname {
          font-size: 32rpx;
          font-weight: bold;
          color: #333333;
          margin-right: 8rpx;
        }

        .authenimg {
          width: 112rpx;
          height: 44rpx;
        }
      }

      .labelbox {
        display: flex;
        align-items: center;
        margin-bottom: 36rpx;

        .label {
          padding: 6rpx 16rpx;
          display: flex;
          align-items: center;
          background: #FFEEE4;
          border-radius: 8rpx;
          margin-right: 12rpx;
          font-size: 20rpx;
          color: #F56E1E;
        }
      }

      .time {
        font-size: 24rpx;
        color: #333333;
        margin-bottom: 8rpx;
      }

      .addressbox {
        display: flex;
        align-items: center;

        .addtext {
          flex: 1;
          font-size: 24rpx;
          color: #333333;
        }

        .dictext {
          font-size: 24rpx;
          color: #666666;
          margin-left: 32rpx;
        }
      }
    }
  }
}

.Serverbox {
  width: 702rpx;
  // height: 400rpx;
  margin: 20rpx auto;

  .Servertextbox {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
  }

  .Servertext {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    margin-bottom: 20rpx;
  }
}

.Evalbox {
  width: 702rpx;
  // height: 400rpx;
  margin: 40rpx auto;

  .Evaltext {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    margin-bottom: 30rpx;
  }
}

.page_top2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 750rpx;
  box-sizing: border-box;
  transition: 0.3s all;
  z-index: -1;

  .tabsBack {
    height: 44px;
    padding-left: 32rpx;
    display: flex;
    align-items: center;
    z-index: 999;

    .topTitle {
      padding-left: 20rpx;
      font-weight: bold;
      font-size: 36rpx;
      color: #333333;
      width: 300rpx;
    }

    .blackbox {
      width: 52rpx;
      height: 52rpx;
      display: flex;
      align-items: center;
    }

    image {
      width: 24rpx;
      height: 36rpx;
      display: block;
    }
  }
}

.page_top {
  position: absolute;
  top: 0;
  left: 0;
  width: 750rpx;
  box-sizing: border-box;
  transition: 0.3s all;
  z-index: -1;

  // background: #29282c;
  // z-index: 999999;

  .tabs {
    position: relative;
    display: flex;
    // align-items: center;
    height: 550rpx;

    // background-color: plum;
    // z-index: -1;
    .swiper {
      width: 100%;
      height: 100%;
      // height: 228rpx;
    }

    .bannerImageBox {
      width: 100%;
      // padding: 24rpx 0;

      .adverimg {
        // width: 702rpx;
        width: 100%;
        height: 180rpx;
        // height: 100%;
        display: block;
        margin: 0 auto;
      }
    }

    .changeImg {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: absolute;
      bottom: 60rpx;
      right: 10rpx;
      font-size: 20rpx;
    }

    >image {
      width: 100%;
      height: 100%;
    }

    .name {
      font-size: 36rpx;
      color: #fff;
      padding-left: 20rpx;
      width: 200rpx;
    }

    button {
      width: 50rpx;
      height: 50rpx;
      position: absolute;
      right: 40rpx;
      top: 40rpx;
      text-align: center;
      line-height: 50rpx;

      image {
        width: 50rpx;
        height: 50rpx;
      }
    }

    .onlin {
      position: absolute;
      left: 40rpx;
      top: 6%;
      width: 208rpx;
      height: 44rpx;
      background: #ffffff;
      border-radius: 22px;
      line-height: 44rpx;
      color: #1db468;
      font-size: 24rpx;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;

      &::before {
        content: "";
        display: inline-block;
        background: #1db468;
        width: 12rpx;
        height: 12rpx;
        border-radius: 8rpx;
        margin-right: 8rpx;
      }
    }
  }
}


.user_visitior {
  position: absolute;
  top: 330rpx;
  left: 0;
  // margin-left: -351rpx;
  z-index: 2;
  transition: 0.5s;
  box-sizing: border-box;
  width: 100%;

  // background-color: #fff;
  // border-radius: 32rpx;
  .userBox {
    background: #FFFFFF;
    box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.11);
    width: 702rpx;
    margin: 0 auto;
    border-radius: 16rpx;
    padding: 32rpx 24rpx;
  }

  .userinfo {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;

    .hdimg {
      width: 112rpx;
      height: 112rpx;
      border-radius: 50%;
      background-color: aqua;
    }

    .rightbox {
      margin-left: 24rpx;
      flex: 1;

      .namebox {
        display: flex;
        align-items: center;
        margin-bottom: 16rpx;

        .name {
          font-size: 36rpx;
          font-weight: bold;
          color: #333333;
          margin-right: 8rpx;
        }

        .level {
          width: 80rpx;
          // height: 32rpx;
          border-radius: 8rpx;
          background: linear-gradient(90deg, #EEC385 0%, #F8CE8A 100%);
          color: #5F4C36;
          text-align: center;
          font-size: 26rpx;
        }

        .level2 {
          width: 80rpx;
          // height: 32rpx;
          border-radius: 8rpx;
          background: linear-gradient(90deg, #FF5B67 0%, #FF5989 100%);
          color: #fff;
          text-align: center;
          font-size: 26rpx;
        }

        .level3 {
          width: 80rpx;
          // height: 32rpx;
          border-radius: 8rpx;
          background: linear-gradient(90deg, #FF951F 0%, #FF581D 100%);
          color: #fff;
          text-align: center;
          font-size: 26rpx;
        }

        .name_edit {
          width: 160rpx;
          height: 56rpx;
          border-radius: 28rpx;
          border: 2rpx solid #E6E6E6;
          color: #333333;
          font-size: 28rpx;
          text-align: center;
          line-height: 56rpx;
          margin-left: auto;
        }

        .Followbtn {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 136rpx;
          height: 56rpx;
          background: #706EEE;
          border-radius: 28rpx;
          margin-left: auto;

          .follimg {
            width: 24rpx;
            height: 26rpx;
            display: block;
          }

          .folltext {
            font-size: 28rpx;
            color: #fff;
          }
        }
      }

      .r_name_2 {
        display: flex;
        align-items: center;

        .ratingbox {
          display: flex;
          align-items: center;
          margin-right: 18rpx;

          .rattext {
            font-size: 24rpx;
            color: #666666;
          }

          .ratimg {
            width: 24rpx;
            height: 24rpx;
            margin-right: 6rpx;
          }
        }

        .addrebox {
          display: flex;
          align-items: center;

          .addreimg {
            width: 32rpx;
            height: 32rpx;
          }

          .placed {
            color: #666666;
            font-size: 24rpx;
          }
        }
      }
    }
  }

  .messagebox {
    display: flex;
    align-items: center;
    margin-bottom: 8rpx;
    flex-wrap: wrap;

    .rimg {
      width: 32rpx;
      height: 32rpx;
    }

    .label {
      // width: 120rpx;
      // height: 60rpx;
      padding: 10rpx 20rpx;
      // border: 1rpx solid #e4e4e4;
      background-color: #e4e4e4;
      border-radius: 8rpx;
      text-align: center;
      color: #333333;
      font-size: 28rpx;
      margin-right: 15rpx;
      margin-bottom: 8rpx;
      display: flex;
      justify-content: center;
      align-items: center
    }

    .me_title {
      color: #999999;
      font-size: 28rpx;
      min-width: 84rpx;
    }

    .me_text {
      color: #333333;
      font-size: 28rpx;
    }

    .ClickNum {
      display: flex;
      align-items: center;
      margin-left: auto;

      .sum {
        font-size: 24rpx;
        color: #333333;
        // margin-bottom: 5rpx;
      }
    }
  }

  .bottomline {
    width: 654rpx;
    height: 2rpx;
    border-bottom: 1rpx solid #E4E4E4;
    margin: 0 auto;
    margin-top: 16rpx;
  }

  .Introduce {
    color: #666666;
    font-size: 26rpx;
    margin-top: 24rpx;
  }
}

.openBg {
  transition: 0.5s;
  transform: translateY(300rpx);
}

.navbox {
  // width: 704rpx;
  width: 100%;
  height: 116rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 0 auto;
  margin-top: 20rpx;
  background-color: #fefefe;
  border-bottom: 1rpx solid #E4E4E4;

  .navtitle {
    width: calc(100% / 3);
    height: 100%;
    color: #999999;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .text4 {
    color: #333333;
    font-size: 32rpx;
    font-weight: bold;
  }

  .aft4 {
    width: 40rpx;
    height: 8rpx;
    background: #706EEE;
    border-radius: 4rpx;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}


.teintimg {
  // max-width: 100%;
  width: 220rpx;
  min-width: 220rpx;
  height: 300rpx;
  // min-height: 500rpx;
  // margin: 0 auto;
  margin-left: 20rpx;
  border-radius: 16rpx;
  display: block;
  // background-color: #706EEE;
}

.contentbox {
  width: 100%;
  padding: 32rpx;
  box-sizing: border-box;
  margin-bottom: 24rpx;
  border-radius: 16rpx;
  background: #FFFFFF;
  box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.08);

  .conCellBox {
    width: 100%;
    display: flex;
    align-items: center;

    .icon {
      width: 112rpx;
      min-width: 112rpx;
      height: 112rpx;
      // background-color: yellowgreen;
      margin-right: 32rpx;
      border-radius: 18rpx;
    }

    .titlebox {
      margin-right: auto;

      .title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333333;
      }

      .fee {
        font-size: 32rpx;
        font-weight: 500;
        color: #FC201C;
        margin-top: 12rpx;
      }
    }

    .reservabtn {
      width: 182rpx;
      min-width: 182rpx;
      height: 64rpx;
      background: #706EEE;
      border-radius: 32rpx;
      text-align: center;
      line-height: 64rpx;
      color: #fff;
      font-size: 28rpx;
    }

    .reservabtn2 {
      width: 182rpx;
      min-width: 182rpx;
      height: 64rpx;
      background: red;
      border-radius: 32rpx;
      text-align: center;
      line-height: 64rpx;
      color: #fff;
      font-size: 28rpx;
    }
  }

  .tipsBox {
    width: 100%;
    display: flex;
    font-size: 24rpx;
    margin-top: 14rpx;
    color: #666666;

    .tipsTitle {
      width: 145rpx;
      min-width: 145rpx;
      color: #666666;
    }

    .tipsRemark {
      color: #666666;
      white-space: break-spaces;
    }

  }

}

.reviewbox {
  margin-bottom: 32rpx;

  .re_user {
    display: flex;

    // align-items: center;
    .re_hdimg {
      width: 72rpx;
      height: 72rpx;
      border-radius: 50%;
      background-color: #1db468;
      margin-right: 16rpx;
    }

    .re_namebox {
      flex: 1;

      .re_name {
        display: flex;
        align-items: center;
        margin-bottom: 6rpx;

        .name {
          font-size: 28rpx;
          font-weight: bold;
          color: #333333;
          margin-right: auto;
        }

        .titme {
          font-size: 24rpx;
          color: #999999;
        }
      }

      .starbox {
        display: flex;
        align-items: center;
        margin-bottom: 24rpx;

        .starimg {
          width: 24rpx;
          height: 24rpx;
        }
      }

      .re_con {
        font-size: 28rpx;
        color: #333333;
        // border-bottom: 1rpx solid #E4E4E4;
        padding-bottom: 24rpx;
      }

      .re_sebox {
        display: flex;
        align-items: center;
        border-bottom: 1rpx solid #E4E4E4;
        padding-bottom: 32rpx;

        .serviceimg {
          width: 32rpx;
          height: 32rpx;
          margin-right: 8rpx;
          display: block;
        }

        .se_text {
          color: #999999;
          font-size: 24rpx;
        }
      }
    }
  }
}


.bottmobtnbox {
  width: 100%;
  height: 196rpx;
}

.bottmobtn {
  width: 100%;
  height: 196rpx;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;

  .tebtn {
    width: 670rpx;
    height: 88rpx;
    background: #706EEE;
    border-radius: 44rpx;
    text-align: center;
    line-height: 88rpx;
    color: #fff;
    font-size: 32rpx;
    font-weight: bold;
    margin: 20rpx auto;
  }
}

.puadd {
  width: 100rpx;
  height: 46rpx;
  border-radius: 32rpx;
  background-color: #706eee;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20rpx 0;
  margin-left: auto;
  margin-right: 20rpx;

  .putitle {
    color: #fff;
    font-size: 22rpx;
    font-weight: 400;
  }

  .releaseimg {
    width: 24rpx;
    height: 24rpx;
  }
}

.list {
  // background: #262626;
  // padding-bottom: 20rpx;
  display: flex;
  flex-wrap: wrap;
  // margin-top: 8rpx;
  box-sizing: border-box;
  width: 95%;
  margin: 13rpx auto;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  border-radius: 16rpx;
  box-shadow: 0 0 12rpx 0 rgba(0, 0, 0, 0.08);
  padding: 20rpx;
  box-sizing: border-box;

  .userbox {
    display: flex;
    width: 100%;

    .userimg {
      min-width: 80rpx;
      width: 80rpx;
      height: 80rpx;
      display: block;
      border-radius: 50%;
    }

    .middbox {
      margin-left: 24rpx;
      flex: 1;
      min-width: 424rpx;
      width: 424rpx;

      .name {
        width: 100%;
        font-size: 32rpx;
        color: #333333;
        font-weight: 600;
        display: flex;
        align-items: center;

        >image {
          width: 76rpx;
          margin-left: 10rpx;
        }
      }

      .daybox {
        font-weight: 400;

        .Birthday {
          font-size: 24rpx;
          color: #999999;
          // border-right: 1rpx solid #999999;
          padding: 0 15rpx 0 0;
        }

        .borderLine {
          color: #999999;
          font-size: 24rpx;
        }

        .city {
          font-size: 24rpx;
          color: #999999;
          margin-left: 15rpx;
        }
      }
    }

    .time {
      // margin-left: 268rpx;
      width: 140rpx;
      text-align: right;
      font-size: 24rpx;
      color: #999999;
    }
  }

  &::after {
    content: "";
    display: block;
    height: 1px;
    width: 325rpx;
  }

  .message {
    width: 100%;
    height: 80rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .name-avatar {
      height: 80rpx;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;

      .avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 10rpx;

        image {
          width: 100%;
          height: 100%;
          border-radius: 10rpx;
        }
      }

      .name {
        margin-left: 10rpx;
        font-size: 15px;
        font-weight: 600;
      }
    }

    .time {
      width: 200rpx;
      height: 100rpx;
      line-height: 100rpx;
      font-size: 15px;
      text-align: right;
    }
  }

  .content {
    margin-top: 24rpx;
    // margin-bottom: 10rpx;
    font-size: 28rpx;
    color: #7b7b7b;
    width: 100%;
  }

  .diyC {
    font-size: 28rpx;
    color: #333333;
    line-height: 40rpx;
    white-space: pre-line;
  }

  .imglist {
    box-sizing: border-box;
    width: 100%;
    margin: 10rpx 0 20rpx 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;

    .img {
      box-sizing: border-box;
      width: 180rpx;
      height: 180rpx;
      margin-top: 20rpx;
      margin-left: 18rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .ft_btn {
    width: 100%;
    margin-bottom: 10rpx;
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    // justify-content: flex-end;
    // justify-content: space-between;

    .citybottom {
      font-size: 24rpx;
      color: #999999;
    }

    .buttonbox {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 140rpx;
      font-size: 26rpx;
      margin-left: auto;

      .zan {
        display: flex;
        align-items: center;
        margin-left: 18rpx;
      }
    }

    .boxWidth {
      width: 230rpx;
    }

    button {
      height: 44rpx;
      width: 44rpx;
      // margin-left: 16rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      image {
        height: 44rpx;
        width: 44rpx;
      }
    }

    .icon_box {
      height: 48rpx;
      width: 48rpx;
      border-radius: 48rpx;
      background: rgba(255, 255, 255, 0.9);
      margin-right: 16rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      image {
        height: 32rpx;
        width: 32rpx;
      }
    }

    .time {
      width: 75%;
      height: 100rpx;
      line-height: 100rpx;
      font-size: 15px;
      text-align: left;
    }

    .icon_pad {
      width: 44rpx;
      height: 44rpx;
      padding-left: 25rpx;
      padding-right: 10rpx;
      text-align: left;
    }
  }

}

.kongimg {
  width: 330rpx;
  height: 298rpx;
  display: block;
  margin: 0 auto;
  // margin-top: 102rpx;
  margin-bottom: 40rpx;
}

.kongtext {
  font-size: 28rpx;
  color: #999999;
  text-align: center;
}

.cirlistBox {
  width: 100%;
  padding: 24rpx;
}

.cirlist {
  position: relative;
  width: 100%;
  height: 548rpx;
  border-radius: 24rpx;
  // padding: 36rpx 32rpx;
  // background-color: #9796ed;
  // margin: 0 auto;
  margin-bottom: 24rpx;

  .cirinfobox {
    position: relative;
    display: flex;
    align-items: center;
    // margin-bottom: 32rpx;
    padding: 36rpx 32rpx;
    z-index: 10;

    .hdimg {
      min-width: 104rpx;
      max-width: 104rpx;
      height: 104rpx;
      border-radius: 16rpx;
      border-radius: 50%;
      border: 4rpx solid #FFFFFF;
      margin-right: 24rpx;
    }

    .cirinfo {
      flex: 1;

      .cirname {
        font-size: 32rpx;
        font-weight: bold;
        color: #fff;
        margin-bottom: 16rpx;
      }

      .cirrem {
        width: 400rpx;
        font-size: 24rpx;
        color: #EFEFEF;
      }
    }

    .cirjoin {
      width: 120rpx;
      height: 56rpx;
      background: #6C6AFF;
      border-radius: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .joinimg {
        width: 24rpx;
        height: 24rpx;
      }

      .jointext {
        font-size: 24rpx;
        color: #EFEFEF;
      }
    }

    .cirquit {
      width: 120rpx;
      height: 56rpx;
      border-radius: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #E4E4E4;

      .joinimg {
        width: 24rpx;
        height: 24rpx;
      }

      .jointext {
        font-size: 24rpx;
        color: #999999;
      }
    }
  }

  .activitybox {
    position: relative;
    width: 100%;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    z-index: 10;
    padding-right: 32rpx;

    .actcon {
      width: 584rpx;
      height: 336rpx;
      background: #FFFFFF;
      border-radius: 24rpx;
      // margin-right: 30rpx;
      display: flex;
      align-items: center;
      margin-left: 32rpx;

      .actimg {
        width: 256rpx;
        min-width: 256rpx;
        height: 336rpx;
        border-radius: 24rpx 0rpx 0rpx 24rpx;
        // background-color: red;
      }

      .actright {
        // flex: 1;
        padding: 24rpx;
        height: 100%;
        width: 328rpx;
        display: flex;
        flex-flow: column;
        justify-content: space-between;

        .actname {
          font-size: 28rpx;
          font-weight: bold;
          color: #333333;
          margin-bottom: 60rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          text-overflow: ellipsis;
          overflow: hidden;
        }

        .actgup {
          display: flex;
          margin-bottom: 8rpx;

          .actgupimg {
            width: 32rpx;
            height: 34rpx;
            margin-right: 4rpx;
          }

          .actguptext {
            font-size: 24rpx;
            color: #999999;
            // flex: 1;
            width: 208rpx;
          }
        }

        .actgup2 {
          display: flex;
          margin-top: 26rpx;
          justify-content: flex-end;
          align-items: center;

          .peoplenum {
            font-size: 20rpx;
            color: #999999;
            margin-right: 16rpx;
          }

          .imgbox {
            display: flex;
          }

          .peoImg {
            width: 32rpx;
            height: 32rpx;
            border-radius: 50%;
            margin-left: -9rpx;
            // background-color: #706eee;
          }
        }
      }
    }
  }

  .blackshadow2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 24rpx;
    backdrop-filter: blur(10px);

  }
}

.Commbox {
  width: 100%;

  .msgbox {
    // background-color: #f6f6f6;
    font-size: 28rpx;
    color: #333333;
    line-height: 40rpx;

    .comment {
      color: #afafaf;
      font-size: 28rpx;

      word-break: break-all;

      text {
        box-sizing: border-box;
        font-weight: 500;
        font-size: 28rpx;
        color: #5f698b;
        padding-right: 10rpx;
      }

      .reviewC {
        font-weight: 500;
        font-size: 28rpx;
        color: #1d1d1d;
        // margin: 0 10rpx;
      }

      >text:last-child {
        font-weight: 500;
        font-size: 28rpx;
        color: #1d1d1d;
        word-break: break-all;
        margin-left: 10rpx;
      }
    }
  }
}
</style>
